<extend name="Public/layout" />
<block name="body">
    <style>
        ul li {
            list-style: none;
        }

        html {
            font-size: 10px;
        }

        input,
        select,
        option,
        textarea {
            outline: none;
        }

        a:hover {
            cursor: pointer;
        }

        img {
            width: 100%;
        }

        .bg {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0%;
            z-index: -9999;
        }

        .content {
            width: 100%;
            min-width: 1400px;
            /* margin: 40px auto 0; */
            display: flex;
            color: white;
        }

        .item {
            width: 24%;
            background: url(/Public/Wap/images/itembg.png) no-repeat;
            background-size: 100% 100%;
            margin: 0 10px;
        }

        .list {
            width: 90%;
            margin: 0 auto;
        }

        .time {
            width: 35%;
            margin: 10px auto 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            border-bottom: 1px solid #1a2226;
        }

        .list2 li {
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
            margin: 18px 0 38px 0;
        }

        .list2 li {
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
            margin: 18px 0 38px 0;
        }

        .list2 li .index {
            background: url(/Public/Wap/images/bg2.png) no-repeat;
            background-size: 100% 100%;
            width: 24px;
            height: 30px;
            line-height: 30px;
            text-indent: 2px;
            font-size: 16px;
            color: white;
        }

        .list2 .percent_title {
            font-size: 13px;
            margin: 2px 0 2px;
            color: white;
        }

        .list2 li .percent {
            width: 90%;
            margin-left: 10px;
            color: white;
        }

        .list2 .count {
            width: 50px;
            text-align: right;
            line-height: 36px;
            height: 30px;
            color: white;
        }

        .time .text1 {
            background: #31d3d3;
            color: #fff;
            font-size: 14px;
            font-weight: 800;
            text-align: center;
            width: 140px;
            height: 40px;
            line-height: 40px;
        }

        .list2 .percent_num {
            position: absolute;
            width: 10%;
            background: #31d3d3;
            height: 8px;
            border-radius: 8px;
        }
    </style>
    <div style="background: #191d23;width: 100%;">
        <img class="bg" src="/Public/Wap/images/bg.png">
        <div class="time" style="margin: 30px auto">
            <div class="text1">今日预估服务费</div>
            <div class="playNum" style="font-size:40px;text-align: center;color: bisque">3041.72</div>
            <div class="tiem_content" style="width: 158px;">
                <span class="ymd"></span>
                <span class="hms">2020-06-15 18:23:24</span>
            </div>
        </div>
        <div class="content">
            <div class="item item1" style="display: block;">
                <ul class="list list2">
                    <li>
                        <div class="index">1</div>
                        <div class="percent">
                            <div class="percent_title">陈浩</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 15%"></div>
                            </div>
                        </div>
                        <div class="count">1348.68</div>
                    </li>
                    <li>
                        <div class="index">2</div>
                        <div class="percent">
                            <div class="percent_title">陈浩</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 7%"></div>
                            </div>
                        </div>
                        <div class="count">478.16</div>
                    </li>
                    <li>
                        <div class="index">3</div>
                        <div class="percent">
                            <div class="percent_title">陈浩</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 4%"></div>
                            </div>
                        </div>
                        <div class="count">466.67</div>
                    </li>
                    <li>
                        <div class="index">4</div>
                        <div class="percent">
                            <div class="percent_title">朱华丽</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 10%"></div>
                            </div>
                        </div>
                        <div class="count">141.44</div>
                    </li>
                    <li>
                        <div class="index">5</div>
                        <div class="percent">
                            <div class="percent_title">肖学强</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 8%"></div>
                            </div>
                        </div>
                        <div class="count">104.54</div>
                    </li>
                    <li>
                        <div class="index">6</div>
                        <div class="percent">
                            <div class="percent_title">吕方康</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 7.000000000000001%"></div>
                            </div>
                        </div>
                        <div class="count">100.75</div>
                    </li>
                    <li>
                        <div class="index">7</div>
                        <div class="percent">
                            <div class="percent_title">邓林泳</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 7.000000000000001%"></div>
                            </div>
                        </div>
                        <div class="count">89.60</div>
                    </li>
                    <li>
                        <div class="index">8</div>
                        <div class="percent">
                            <div class="percent_title">唐璐丹</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 6%"></div>
                            </div>
                        </div>
                        <div class="count">81.60</div>
                    </li>
                    <li>
                        <div class="index">9</div>
                        <div class="percent">
                            <div class="percent_title">刘佩</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 6%"></div>
                            </div>
                        </div>
                        <div class="count">76.09</div>
                    </li>
                    <li>
                        <div class="index">10</div>
                        <div class="percent">
                            <div class="percent_title">何纯丽</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 6%"></div>
                            </div>
                        </div>
                        <div class="count">74.40</div>
                    </li>
                </ul>
            </div>
            <div class="item item2" style="display: block;">
                <ul class="list list2">
                    <li>
                        <div class="index">11</div>
                        <div class="percent">
                            <div class="percent_title">大玲子</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 2%"></div>
                            </div>
                        </div>
                        <div class="count">32.70</div>
                    </li>
                    <li>
                        <div class="index">12</div>
                        <div class="percent">
                            <div class="percent_title">张达</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 2%"></div>
                            </div>
                        </div>
                        <div class="count">25.80</div>
                    </li>
                    <li>
                        <div class="index">13</div>
                        <div class="percent">
                            <div class="percent_title">阳佳豪</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 1%"></div>
                            </div>
                        </div>
                        <div class="count">7.96</div>
                    </li>
                    <li>
                        <div class="index">14</div>
                        <div class="percent">
                            <div class="percent_title">王家兵</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 1%"></div>
                            </div>
                        </div>
                        <div class="count">6.98</div>
                    </li>
                    <li>
                        <div class="index">15</div>
                        <div class="percent">
                            <div class="percent_title">欧阳海</div>
                            <div class="percent_bg">
                                <div class="percent_num" style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="count">6.35</div>
                    </li>
                </ul>
            </div>
            <div class="item item3" style="display: none;">
                <ul class="list list2"></ul>
            </div>
            <div class="item item4" style="display: none;">
                <ul class="list list2"></ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + date.getHours() + seperator2 + date.getMinutes()
                + seperator2 + date.getSeconds();
            return currentdate;
        }
        var NowFormatDate;
        $(function () {

            var url = '/kcadmin/data/getRankingDAta';

            getdata(url);
            setInterval(function () {
                getdata(url)
            }, 600000);

            function getdata(url) {
                NowFormatDate = getNowFormatDate();
                $(".hms").html(NowFormatDate);
                $.ajax({
                    url: url,

                    type: 'GET',
                    datatype: 'json',
                    success: function (mes) {
                        console.log('#########', mes);
                        $('.playNum').text(mes.totalfee);
                        var out = mes.list1;

                        let n = 0;
                        let pageNum = Math.ceil(mes.total / 40)
                        let time = 0
                        data = mes.list1;

                        render(mes.totalfee)
                        let setI2 = setInterval(function () {
                            n = n + 40
                            if (n > pageNum * 40 - 1) {
                                n = 0
                            }
                            data = mes.list2;
                            render(mes.totalfee)
                            time = time + 10000
                            if (time > 600000) {
                                clearTimeout(setI2)
                            }

                        }, 10000)
                    }
                })
            }
        })

        function render(out) {
            var item1 = ''
            var item2 = ''
            var item3 = ''
            var item4 = ''
            $('.item1').css('display', 'none')
            $('.item2').css('display', 'none')
            $('.item3').css('display', 'none')
            $('.item4').css('display', 'none')
            //console.log(data.length)

            $.each(data, function (i, v) {
                console.log(v.estimateServiceFee);
                var ol = (v.estimateServiceFee / out).toFixed(2) * 100;
                if (ol > 24) ol = 17;
                if (i < 10) {
                    $('.item1').css('display', 'block')
                    item1 += '<li>'
                        + '<div class="index">' + v.rank + '</div>'
                        + '<div class="percent">'
                        + '<div class="percent_title">' + v.nickname + '</div>'
                        + '<div class="percent_bg">'
                        + '<div class="percent_num" style="width: ' + v.prent + '%"></div>'
                        + '</div>'
                        + '</div>'
                        + '<div class="count">' + v.estimateServiceFee + '</div>'
                        + '</li>'
                } else if (i < 20) {
                    $('.item2').css('display', 'block')
                    item2 += '<li>'
                        + '<div class="index">' + v.rank + '</div>'
                        + '<div class="percent">'
                        + '<div class="percent_title">' + v.nickname + '</div>'
                        + '<div class="percent_bg">'
                        + '<div class="percent_num" style="width: ' + v.prent + '%"></div>'
                        + '</div>'
                        + '</div>'
                        + '<div class="count">' + v.estimateServiceFee + '</div>'
                        + '</li>'

                } else if (i < 30) {
                    $('.item3').css('display', 'block')
                    item3 += '<li>'
                        + '<div class="index">' + v.rank + '</div>'
                        + '<div class="percent">'
                        + '<div class="percent_title">' + v.nickname + '</div>'
                        + '<div class="percent_bg">'
                        + '<div class="percent_num" style="width: ' + v.prent + '%"></div>'
                        + '</div>'
                        + '</div>'
                        + '<div class="count">' + v.estimateServiceFee + '</div>'
                        + '</li>'

                } else if (i < 40) {
                    $('.item4').css('display', 'block')
                    item4 += '<li>'
                        + '<div class="index">' + v.rank + '</div>'
                        + '<div class="percent">'
                        + '<div class="percent_title">' + v.nickname + '</div>'
                        + '<div class="percent_bg">'
                        + '<div class="percent_num" style="width: ' + ol + '%"></div>'
                        + '</div>'
                        + '</div>'
                        + '<div class="count">' + v.estimateServiceFee + '</div>'
                        + '</li>'
                }
            })
            $('.item1 .list2').html(item1)
            $('.item2 .list2').html(item2)
            $('.item3 .list2').html(item3)
            $('.item4 .list2').html(item4)
        }

    </script>
</block>